<?php
echo $javascript->link(array('autocomplete/jquery.tokeninput'));
echo $this->Html->css(array('autocomplete/front_adjectives/token-input-rtu'));
?>
<div class="like-text">
    <h1 id="h1" original-title="Title">How Much do You Like</h1>
    <div class="ques"> <?php echo $this->Html->image('front/ques.png', array('alt' => 'SKIP', 'title' => 'skip')); ?></div>
    <div class="skip"> <a href="#">&nbsp;</a></div>
</div>

<div class="meter-area">
    <div id="slider">
        <?php foreach ($subjects as $subject) { ?>
            <div>
                <div class="image-display">
                    <?php
                    $thumbnail = $this->PhpThumb->generate(
                            array(
                                'save_path' => WWW_ROOT . 'img/uploads/Subjects/thumbs',
                                'display_path' => 'uploads/Subjects/thumbs',
                                'error_image_path' => 'error.png',
                                'src' => WWW_ROOT . "img/uploads/Subjects/" . $subject['Subject']['image'],
                                'w' => 207,
                                'h' => 192,
                                'q' => 70,
                                'zc' => 1
                                
                            )
                    );
                    echo $this->Html->image($thumbnail['src'], array('width' => $thumbnail['w'], 'height' => $thumbnail['h'], 'title' => $subject['Subject']['subject'], 'alt' => $subject['Subject']['subject']));
                    ?></div>
                <div class="meter-right">
                    <div class="txt">
                        <h2 ><?php
                            echo str_replace('_',' ',$subject['Subject']['subject']);
                                if (!empty($subject['Subject']['desc'])) {
                                echo " (" . $subject['Subject']['desc'] . ")";
                                }
                            ?>
                        </h2>
                        <div class="meter-div">
                            <!-- Slider -->
                        
                        <div class="slider-range-min" id="<?php __($subject['Subject']['id']) ?>" name="<?php __(str_replace('_',' ',$subject['Subject']['subject']));?>" imagename="<?php echo $subject['Subject']['image'];?>"> </div>
                        </div>
                    </div>
                </div>
            </div>
        <?php } ?>
    </div>
</div>
<input type="hidden" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />

<div class="body-container">
    <div class="subject">
        <h3>Rate a Different Subject</h3>
        <?php
        echo $this->Form->create('Subject');
        echo $this->Form->input('Subject.name', array('label' => '', 'value' => 'Enter here','id'=>'inputString','autocomplete'=>'off','onkeyup'=>'lookup(this.value)','onclick'=>'this.value=""'));
        echo $this->Form->end(array('label'=>'','style'=>'display:none;'));
        ?>

    </div>
    <div id="suggestions" style="position: absolute; border: 1px solid #0099cc;"></div>
    <div class="content">
        <div class="box">
            <h4>What is Rate The Universe ?</h4>
            <?php __($what_is_rtu['Facts']['description']); ?>
        </div>
        <div class="box">
            <h4>fun fact</h4>
            <?php __($fun_facts['Facts']['description']); ?>
        </div>
        <div class="box nomargin">
            <h4>Did you know ?</h4>
            <?php __($did_u_know['Facts']['description']); ?>
        </div>
        <div class="most-rated">
            <h5>Most Rated Subject Today</h5>
            <ul>
                <?php 
                //debug($mostrated);
                foreach($mostrated as $subject):
                    $thumbnail = $this->PhpThumb->generate(
                            array(
                                'save_path' => WWW_ROOT . 'img/uploads/Subjects/thumbs',
                                'display_path' => 'uploads/Subjects/thumbs',
                                'error_image_path' => 'error.png',
                                'src' => WWW_ROOT . "img/uploads/Subjects/" . $subject['Subject']['image'],
                                'w' => 66,
                                'h' => 66,
                                'q' => 100,
                                'zc' => 1
                            )
                    );
                ?>
                <li>
                <?php
                    echo $this->Html->link($this->Html->image($thumbnail['src'], array('class' => 'latest_img','width' => $thumbnail['w'], 'height' => $thumbnail['h'], 'title' => $subject['Subject']['subject'], 'alt' => $subject['Subject']['subject'])),array('controller'=>'Subjects','action'=>'subject',$subject['Subject']['id']),array('escape'=>false));
                    ?>
                
                </li>
                <?php endforeach; ?>
                
            </ul>
        </div>
    </div>
    <div class="fl"><?php echo $this->Html->image('/img/front/bottom-cor.png', array('alt' => 'img1', 'title' => 'img1')); ?></div>
</div>
<div id="popup_container" style="display:none">

    <div id="rating" class="rate">
        <?php echo $this->Form->create('Subject',array('action'=>'rate'));
        echo $this->Form->input('id',array('type'=>'hidden','id'=>'rated_subject'))
        ?>    
        
              <table cellspacing="0" cellpadding="0" border="0" >
                <tbody>
                  <tr>
                      <td colspan="2"><h2>RATE <span id="subjectname"></span></h2></td>
                  </tr>
                  <tr>
                    <td width="22%">
                        <div id="subjectpopupimage"></div>
                    </td>
                    <td width="78%">
                        <div class="meter-div1">
                        <!-- Slider -->
                                   <div id="small-slider-range-min"> </div>
                      </div>
                        <input type="hidden" id="smaill-amount" style="border:0; color:#f6931f; font-weight:bold;" /></td>
                  </tr>
                  <tr>
                    <td colspan="2"><h3>Add One, Two, or Three Adjectives (optional)</h3></td>
                  </tr>
                  <tr>
                    <td colspan="2"><?php echo $this->Form->input('adjective1',array('label'=>'','id'=>'adjective1','type'=>'text','title'=>'Adjective','class'=>'input2')) ?></td>
                
                  </tr>
                  <tr>
                    <td colspan="2"><?php echo $this->Form->input('adjective2',array('label'=>'','id'=>'adjective2','type'=>'text','title'=>'Adjective','class'=>'input2')) ?></td>
                  </tr>
                  <tr>
                    <td colspan="2"><?php echo $this->Form->input('adjective3',array('label'=>'','id'=>'adjective3','type'=>'text','title'=>'Adjective','class'=>'input2')) ?></td>
                  </tr>
                  <tr>
                    <td  colspan="2" ><?php echo $this->Form->end(array('label'=>'','class'=>'submit-btn')); ?></td>
                  </tr>
                </tbody>
              </table>
            
          </div>

    <div id="login_register" class="register-form">
        <?php echo $this->Form->create('User',array('action'=>'check_login','id'=>'login')); ?>
            <table cellspacing="0" cellpadding="0" border="0" >
                <tbody>
                    <tr>
                        <td colspan="2"><h2>Login or <span id="register-button">Sign Up</span></h2></td>
                    </tr>
                    <tr>
                        <td width="30%"><label class="label1">Email</label></td>
                        <td width="70%"><?php echo $this->Form->input('username',array('label'=>'','id'=>'username','class'=>'input2','title'=>'Your Login email')); ?></td>
                    </tr>
                    <tr>
                        <td><label label1>Password</label></td>
                        <td><?php echo $this->Form->input('password',array('label'=>'','id'=>'password','class'=>'input2','title'=>'Password')) ?></td>
                    </tr>
                    <tr>
                        <td colspan="2"><div id="login-error-box" style="color:#f00;">
                            </div>
                        </td></tr>

                    <tr>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td ><?php echo $this->Form->end(array('label'=>'','class'=>'login-btn','title'=>'Login')) ?></td>
                    </tr>
                </tbody>
            </table>
        </form>
    </div>
</div>
<script language="javascript" >
    $(document).ready(function(){
        var base_url=$('#base-url').text(); // This will be used for all ajax calls as base url
       
         
        $('#slider').bxSlider({
            infiniteLoop: true,
            hideControlOnEnd: false,
            prevImage:base_url+'/img/front/back.png',
            nextImage:base_url+'/img/front/skip.png'
            
        });
        $('.skip').live('click',function(){
            
            $('#sliderD').bxSlider({
                infiniteLoop: false,
                hideControlOnEnd: true
            });
           
        });  
         $('.bx-next').bind('click',function(){
            $( "#amount" ).attr('value','0');
            $( "#small-amount" ).attr('value','0');
             $(".ui-slider-handle" ).html('0');
             $('.ui-slider-handle').css('background-position','0px 0');
           // alert($( "#amount" ).val());
            // alert('sda');
         });   
       $('.bx-prev').bind('click',function(){
           
            $( "#amount" ).attr('value','0');
            $( "#small-amount" ).attr('value','0');
             $('.ui-slider-handle').css('background-position','0px 0');
             $(".ui-slider-handle" ).html('0');
           // alert($( "#amount" ).val());
            // alert('sda');
         }); 
            // OPACITY OF BUTTON SET TO 50%
            $(".latest_img").css("opacity","0.3");
		
            // ON MOUSE OVER
            $(".latest_img").hover(function () {
										  
                // SET OPACITY TO 100%
                $(this).stop().animate({
                    opacity: 1.0
                }, "slow");
            },
           // ON MOUSE OUT
            function () {
			
                // SET OPACITY BACK TO 50%
                $(this).stop().animate({
                    opacity: 0.3
                }, 4000);
            });
    

$( "#small-slider-range-min" ).slider({
			range: "min",
			value:0,
			min: 0,
			max: 100,
			slide: function( event, uii ) {
				$( "#small-amount" ).val(uii.value );
                                $( ".ui-slider-handle" ).html(uii.value );
                                $( ".slider-range-min" ).slider({value:uii.value});
                                $(uii.value).each(function(){
                    var i=1;
                    pindex=10;
                    if(uii.value%5=='0' && uii.value!='100'){
                        
                         pindex=-(uii.value*4);
                        //alert(ui.value);
                         $('.ui-slider-handle').css('background-position',pindex+'px 0');
                        i++;
                    }
                    
                });
			}
                        
		});
		$( "#amount" ).val($( "#small-slider-range-min" ).slider( "value" ) );
		
	
        $( ".slider-range-min" ).slider({
            range: "min",
            value: 0,
            min: 0,
            max: 100,
            stop: function(event, ui) { 
                $(".ui-slider-handle").trigger('click');
            },
            start: function( event, ui ) {
                $( "#amount" ).val(ui.value );
                $( ".ui-slider-handle" ).html(ui.value );
                $( "#rated_subject" ).val($(this).attr('id'));
                $( "#subjectname" ).html($(this).attr('name'));
                $( "#small-slider-range-min" ).slider({value:ui.value});
                },
                
            slide: function( event, ui ) {
               
                $( "#amount" ).val(ui.value );
                $( ".ui-slider-handle" ).html(ui.value );
                $( "#rated_subject" ).val($(this).attr('id'));
                $( "#subjectname" ).html($(this).attr('name'));
                $( "#small-slider-range-min" ).slider({value:ui.value});
                $(ui.value).each(function(){
                     pindex=10
                    if(ui.value%5=='0' && ui.value!='100'){
                        pindex=-(ui.value*4);
                        //alert(ui.value);
                         $('.ui-slider-handle').css('background-position',pindex+'px 0');
                        
                    }
                    
                });
                
                        
            }
        });
          
        $( "#amount" ).val($( ".slider-range-min" ).slider( "value" ) );
        //$( ".ui-slider-handle" ).html('9');
        $( ".ui-slider-handle" ).html($( ".slider-range-min" ).slider( "value" ) );
         
         
        $('.slider-range-min .ui-slider-handle').fancybox({
            'transitionIn'	:	'elastic',
            'transitionOut'	:	'elastic',
            'speedIn'		:	600, 
            'speedOut'		:	200, 
            'overlayShow'	:	true,
            'href'          :  "#rating",
            'onStart'       :function(){
                //alert($('#'+$('#rated_subject').val()).attr('name'));
                $.ajax({
                    url:base_url+'/Subjects/generatepopupimage',
                    type:'POST',
                    data:{image:$('#'+$('#rated_subject').val()).attr('imagename')},
                    success:function(response){
                        $('#subjectpopupimage').html(response);
                    }
                });
            }
//            'onClosed'      :function(){
//                if($('#adjective1').tokenInput("get").length !='0' || $('#adjective2').tokenInput("get").length !='0'  || $('#adjective3').tokenInput("get").length != '0'){
//                $('#adjective1').tokenInput("clear").blur();
//                   $('#adjective2').tokenInput("clear").blur();
//                      $('#adjective3').tokenInput("clear").blur();
//                }
//            }
//            
                
                
        });
        /*********************** Autocomplete for Adjectives ************************/
        
           
        
        /*********************** Autocomplete for Adjectives Ends ************************/
        
        /*******************Login from popup   *************************/
        $('#login').live('submit',function(){
            if($('#username').val()==''){
                $('#username').attr('title','Enter Username');
                $('#login-error-box').fadeIn(200).html('Enter Your Email').delay(5000).fadeOut(500);;
                return false;
            }else if($('#password').val()==''){
                
                $('#login-error-box').fadeIn(200).html('Enter Password').delay(5000).fadeOut(500);
                return false;
            }
             $.ajax({
                url:base_url+'/Users/check_login' ,
                type:'POST',
                data:{username:$('#username').val(),password:$('#password').val()},
                success:function(response){
                    var response=$.trim(response);
                    var obj = jQuery.parseJSON(response);
                   // alert( obj.error);   
                    if(obj.error==false){
                        $('#login_element').load(base_url+'/Subjects/login_element');
                        $('#login_register').attr('id','rating');
                        $('#rating').attr('id','login_register');
                        //$('#SubjectRateForm').post();
                        $('#SubjectRateForm').trigger('submit');
                    }else{
                        $('#login-error-box').fadeIn(200).html('Invalid Username Or Password').delay(5000).fadeOut(500);
                    }
                }
             });
           return false; 
        });
        $('#SubjectRateForm').live('submit',function(){
        
        $.ajax({
            url:base_url+'/Subjects/rate',
            type:'POST',
            data:{subject_id:$('#rated_subject').val(),rating:$('#amount').val(),adj1:$('#adjective1').val(),adj2:$('#adjective2').val(),adj3:$('#adjective3').val()},
            success:function(response){
                var result= $.parseJSON(response);
                
                //  $.split(response);
                if(result.error){
                    if(!result.login){
                        $('#login_register').attr('id','rating');
                        $('#rating').attr('id','login_register');
                        $('.slider-range-min .ui-slider-handle').fancybox({href:'#login_register'});
                        //alert($('#login_register').attr('id'));alert($('#rating').attr('id'));
                        $('.slider-range-min .ui-slider-handle').trigger('click');
                    }else if(!result.canRate){
                         //alert('You Cant rate a Subject within seven days.');//
                        
                          var data='<div class="register-form" style="padding:30px 0 30px 30px;font-size:16px; font-weight:bold;">You Cant rate a Subject Twice within seven days.</div>';
                        
                        $.fancybox(data);
                        //$.alert('You Cant rate a Subject within seven days.');
                }
                }else{
                    window.location=base_url+'/Subjects/subject/'+result.subjectID;
                }
                
                
            }
        });
        return false;
        });
        
        
        /**************************/
        $('#register-button').click(function(){
        $.fancybox.close();
            $('#open').trigger('click');
            
        });
        /**************************/
        
        
        
        $('#adjective1').tokenInput(base_url+"/Subjects/adjectives",{ theme: "rtu",hintText: "Type in a search term",tokenLimit:'1'});
           $('#adjective2').tokenInput(base_url+"/Subjects/adjectives",{hintText: "Type in a search term", theme: "rtu",tokenLimit:'1'});
           $('#adjective3').tokenInput(base_url+"/Subjects/adjectives",{hintText: "Type in a search term", theme: "rtu",tokenLimit:'1'});   
                    
    }
);
    //function to slide 

</script>
